TablePanel

TablePanel is a reusable React component that provides a clean, structured header panel for data tables or similar data displays. It features customizable action buttons, title display, and record count information, making it ideal for administrative interfaces and data management screens.

Features

• Customizable Action Buttons - Define and style any number of action buttons
• Title Display - Prominently display the panel's purpose
• Record Counts - Show total and selected record counts
• Window Option Selector - Built-in dropdown for window/tab behavior settings
• Modern Styling - Clean, professional appearance with consistent spacing
• Responsive Layout - Adapts to different screen sizes

Installation

Ensure you have the required dependencies:

# If using npm
npm install primereact primeicons react

# If using yarn
yarn add primereact primeicons react

You'll also need to import the PrimeReact CSS files in your project:

import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.min.css";
import "primeicons/primeicons.css";

Component API

Props

Prop	Type	Required	Default	Description
title	string	No	"Table Panel"	The title displayed at the top of the panel.
totalRecords	number	No	0	The total number of records in the associated data.
selectedCount	number	No	0	The number of currently selected records.
actions	array	No	[]	Array of action objects defining the available buttons.

Action Object Structure

Each action in the actions array should be an object with the following properties:

Property	Type	Required	Description
icon	string	Yes	PrimeIcons icon name (e.g., "pi pi-pencil").
label	string	Yes	Text for the tooltip and accessibility label.
onClick	function	No	Callback function executed when the action button is clicked.

Basic Usage

import React from 'react';
import { TablePanel } from './TablePanel';

function MyDataTable() {
  // Define actions for the table panel
  const tableActions = [
    {
      icon: "pi pi-plus",
      label: "Add New",
      onClick: () => console.log("Add action clicked")
    },
    {
      icon: "pi pi-pencil",
      label: "Edit",
      onClick: () => console.log("Edit action clicked")
    },
    {
      icon: "pi pi-trash",
      label: "Delete",
      onClick: () => console.log("Delete action clicked")
    },
    {
      icon: "pi pi-refresh",
      label: "Refresh",
      onClick: () => console.log("Refresh action clicked")
    }
  ];

  return (
    <div className="data-table-container">
      <TablePanel
        title="Users Management"
        totalRecords={150}
        selectedCount={5}
        actions={tableActions}
      />
      
      {/* Your actual data table component would go here */}
    </div>
  );
}

Advanced Usage

Dynamic Actions Based on State

You can dynamically adjust available actions based on application state:

import React, { useState } from 'react';
import { TablePanel } from './TablePanel';

function DynamicActionsTable() {
  const [selectedItems, setSelectedItems] = useState([]);
  const [totalItems, setTotalItems] = useState(100);
  
  // Create actions array based on selection state
  const getActions = () => {
    const baseActions = [
      {
        icon: "pi pi-plus",
        label: "Add New",
        onClick: () => console.log("Add new item")
      },
      {
        icon: "pi pi-refresh",
        label: "Refresh",
        onClick: () => console.log("Refresh data")
      }
    ];
    
    // Only add these actions when items are selected
    if (selectedItems.length > 0) {
      baseActions.push(
        {
          icon: "pi pi-pencil",
          label: "Edit Selected",
          onClick: () => console.log(`Edit ${selectedItems.length} items`)
        },
        {
          icon: "pi pi-trash",
          label: "Delete Selected",
          onClick: () => console.log(`Delete ${selectedItems.length} items`)
        }
      );
    }
    
    return baseActions;
  };

  return (
    <div>
      <TablePanel
        title="Dynamic Actions Example"
        totalRecords={totalItems}
        selectedCount={selectedItems.length}
        actions={getActions()}
      />
      
      {/* Table component with selection capability */}
    </div>
  );
}

Custom Styling

You can extend the component with additional styling:

import React from 'react';
import { TablePanel } from './TablePanel';
import './custom-table-panel.css'; // Your custom CSS

function CustomStyledTable() {
  const actions = [
    {
      icon: "pi pi-download",
      label: "Export",
      onClick: () => console.log("Export clicked")
    }
  ];

  return (
    <div className="custom-table-container">
      <TablePanel
        title="Financial Reports"
        totalRecords={1250}
        selectedCount={0}
        actions={actions}
        // You can pass additional className props if you modify the component
      />
    </div>
  );
}

Component Structure

The TablePanel component is structured with the following main sections:

1. Container - Outer wrapper with styling for the entire panel
2. Header Section - Contains the title and action buttons
3. Actions Row - Displays the action buttons with tooltips
4. Information Section - Shows record counts and the window option dropdown

Styling

The component uses a combination of Tailwind CSS utility classes and PrimeReact styling:

Container Styling

• p-4 - Padding on all sides
• bg-white - White background
• shadow-sm - Subtle shadow for depth
• border border-gray-200 - Light gray border
• rounded-md - Rounded corners
• text-sm - Base text size

Title Styling

• text-lg - Larger text for title
• font-semibold - Semi-bold weight
• text-gray-800 - Dark gray text color

Actions Styling

• PrimeReact Button component with p-button-sm and p-button-text classes
• Tooltips for action labels

Information Section Styling

• text-sm - Small text size
• font-medium - Medium font weight
• text-gray-800 - Dark gray text color

Customization Options

Custom Action Rendering

If you need more control over action button rendering, you can modify the component to accept a render prop:

// Inside your modified TablePanel component
{actions.map((action, idx) => (
  action.renderCustom ? 
    action.renderCustom(action, idx) : 
    <Button
      key={idx}
      icon={action.icon}
      className="p-button-sm p-button-text"
      onClick={() => handleActionClick(action)}
      tooltip={action.label}
    />
))}

Additional Features

Consider extending the component with these features:

• Action button grouping
• Action permissions/visibility control
• Collapsible panel
• Custom dropdown options for window behavior
• Sticky positioning when scrolling

Accessibility Considerations

• Action buttons have tooltips that provide text descriptions
• Consider adding ARIA roles for improved screen reader support
• Ensure sufficient color contrast for all text elements

Integration Examples

With PrimeReact DataTable

import React, { useState } from 'react';
import { TablePanel } from './TablePanel';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

function IntegratedDataTable() {
  const [selectedProducts, setSelectedProducts] = useState([]);
  const [products, setProducts] = useState([
    { id: 1, name: 'Product A', price: 24.99 },
    { id: 2, name: 'Product B', price: 19.99 },
    { id: 3, name: 'Product C', price: 34.99 }
  ]);
  
  const actions = [
    {
      icon: "pi pi-plus",
      label: "Add Product",
      onClick: () => console.log("Add product")
    },
    {
      icon: "pi pi-trash",
      label: "Delete Selected",
      onClick: () => console.log(`Delete ${selectedProducts.length} products`)
    }
  ];

  return (
    <div>
      <TablePanel
        title="Product Inventory"
        totalRecords={products.length}
        selectedCount={selectedProducts.length}
        actions={actions}
      />
      
      <DataTable 
        value={products}
        selection={selectedProducts}
        onSelectionChange={(e) => setSelectedProducts(e.value)}
        selectionMode="multiple"
      >
        <Column selectionMode="multiple" />
        <Column field="id" header="ID" />
        <Column field="name" header="Name" />
        <Column field="price" header="Price" />
      </DataTable>
    </div>
  );
}

Best Practices

1. Meaningful Icons - Choose intuitive icons that represent the actions clearly
2. Limited Actions - Keep the number of visible actions reasonable (3-7)
3. Consistent Behavior - Actions should behave consistently across your application
4. State Feedback - Provide feedback when actions execute (success/failure)
5. Responsive Design - Ensure the panel adapts well on smaller screens

Troubleshooting

Common Issues

• Icons not displaying - Ensure PrimeIcons CSS is properly imported
• Action clicks not registering - Check the onClick function implementation
• Styling inconsistencies - Verify PrimeReact theme CSS